<template>
  <j-modal
    title="移动到..."
    :width="300"
    :visible="visible"
    :confirmLoading="loading"
    @ok="handleOk"
    @cancel="handleCancel">
    <a-spin :spinning="loading">
      <div>请选择目标分组</div>
      <div class="tree-box">
        <a-tree
          show-icon
          blockNode
          :selected-keys="selectedKeys"
          :expanded-keys="expandedKeys"
          :tree-data="treeData"
          @select="onSelect">
          <a-icon slot="folder" type="folder"/>
          <a-icon slot="none" type="home"/>
          <a-icon slot="new" type="folder-add"/>
        </a-tree>
      </div>
    </a-spin>

  </j-modal>
</template>

<script>
import { postAction } from '@api/manage'

const NONE = 'none'
const NEW = 'new'
const SUFFIX = '-suffix'
const folderSlot = {slots: {icon: 'folder'}}
export default {
  name: 'LowAppMoveGroupModal',
  components: {},
  props: {
    // 应用已有标签列表
    labelList: Array,
  },
  data() {
    return {
      visible: false,
      loading: false,
      appId: '',
      selectedKeys: [],
      expandedKeys: [NONE],
      url: {
        moveToGroup: '/online/lowApp/moveToGroup',
      }
    }
  },
  computed: {
    treeData() {
      let children = this.labelList.map((title, key) => ({key: title + SUFFIX, title, ...folderSlot}))
      let treeData = []
      treeData.push({title: '无分组', key: NONE, children, slots: {icon: NONE}})
      treeData.push({title: '创建新分组', key: NEW, slots: {icon: NEW}})
      return treeData
    },
  },
  methods: {

    show(record) {
      this.appId = record.id
      this.selectedKeys = record.appLabel ? [record.appLabel + SUFFIX] : [NONE]
      this.visible = true
    },

    close() {
      this.$emit('close')
      this.visible = false
    },

    handleCancel() {
      this.close()
    },

    handleOk() {
      if (this.selectedKeys.length === 0) {
        this.$message.warning('请选择一个分组')
        return
      }
      let selected = this.selectedKeys[0]
      selected = selected.replace(new RegExp(`${SUFFIX}$`), '')
      this.doEdit(selected)
    },

    onSelect(selectedKeys, info) {
      if (selectedKeys[0] === NEW) {
        this.newGroup()
      } else {
        this.selectedKeys = selectedKeys
      }
    },

    newGroup() {
      this.$JPrompt({
        title: '创建新分组',
        placeholder: '请输入分组名称',
        rule: [
          {required: true, message: '分组名称不能为空！'},
          {max: 10, message: '分组名称不能超过10个字符！'},
        ],
        onOk: (event) => this.doEdit(event.value),
      })
    },

    doEdit(selected) {
      this.loading = true
      return postAction(this.url.moveToGroup, {
        id: this.appId,
        appLabel: selected === NONE ? '' : selected
      }).then((res) => {
        if (res.success) {
          this.$message.success(res.message)
          this.close()
          this.$emit('ok')
        } else {
          this.$message.warning(res.message)
        }
      }).finally(() => this.loading = false)
    },
  }
}
</script>

<style scoped lang="less">
.tree-box {
  margin-top: 8px;
  border: 1px solid #dcdcdc;

  /deep/ .ant-tree-switcher {
    display: none;
  }

  /deep/ .ant-tree.ant-tree-block-node li .ant-tree-node-content-wrapper {
    width: 100%;
  }
}
</style>